<template>
  <div class="water_dev_wrap layout_ch_page dur-400">
    <!-- 框架图 -->
    <img class="frame" src="./images/frame.png" draggable="false" />

    <!-- 参数值 -->
    <ParamValueText
      v-for="(param, indexP) in wsDataStore.waterDevData.params"
      :key="indexP"
      :top="param.top"
      :left="param.left"
      :width="param.width"
      :height="param.height"
      :size="param.size"
    >
      {{ param.value }}
    </ParamValueText>

    <!-- 阀门 -->
    <template
      v-for="(vavle, indexV) in wsDataStore.waterDevData.valves"
      :key="indexV"
    >
      <Vavle1
        v-if="vavle.type === '1'"
        :value="vavle.value"
        :top="vavle.top"
        :left="vavle.left"
        :font-size="vavle.fontSize"
        :block-size="vavle.blockSize"
      />

      <Vavle2
        v-if="vavle.type === '2'"
        :top="vavle.top"
        :left="vavle.left"
        :value="vavle.value"
      />

      <Vavle3
        v-if="vavle.type === '3'"
        :top="vavle.top"
        :left="vavle.left"
        :value="vavle.value"
      />

      <Vavle4
        v-if="vavle.type === '4'"
        :top="vavle.top"
        :left="vavle.left"
        :value="vavle.value"
      />

      <Vavle5
        v-if="vavle.type === '5'"
        :top="vavle.top"
        :left="vavle.left"
        :value="vavle.value"
      />

      <Vavle6
        v-if="vavle.type === '6'"
        :top="vavle.top"
        :left="vavle.left"
        :value="vavle.value"
      />
    </template>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import "./index.scss";
export default defineComponent({
  name: "WaterDev",
});
</script>
<script setup>
import ParamValueText from "@/components/paramValueText/index.vue";
import Vavle1 from "@/components/vavle1/index.vue";
import Vavle2 from "@/components/vavle2/index.vue";
import Vavle3 from "@/components/vavle3/index.vue";
import Vavle4 from "@/components/vavle4/index.vue";
import Vavle5 from "@/components/vavle5/index.vue";
import Vavle6 from "@/components/vavle6/index.vue";
import { animate } from "animejs";
import { useWsDataStore } from "@/store";

const wsDataStore = useWsDataStore();

onMounted(() => {
  // 入场动画
  animate(".dur-400", {
    y: "-300px",
    duration: 400,
  });
});
</script>

<style lang="scss" scoped></style>
